@font-face {
    font-family: "Trade Gothic LT Std";
    font-weight: bold;
    src: url("/resources/fonts/Trade-Gothic/Trade-Gothic-Bold-Condensed.woff2") format("woff2"),
            url("/resources/fonts/Trade-Gothic/Trade-Gothic-Bold-Condensed.woff") format("woff"),
            url('/resources/fonts/Trade-Gothic/TradeGothicLT-BoldCondTwenty.ttf') format('truetype');
}

@font-face {
    font-family: "Trade Gothic LT Std";
    font-weight: normal;
    src: url("/resources/fonts/Trade-Gothic/Trade-Gothic-Condensed.woff2") format("woff2"),
            url("/resources/fonts/Trade-Gothic/Trade-Gothic-Condensed.woff") format("woff"),
            url('/resources/fonts/Trade-Gothic/TradeGothicLT-CondEighteen.ttf') format('truetype');
}

body{
    background-color: var(--backgroundColor);
}
/* Input Border Style*/
.form-control:focus, .form-group:focus {
    box-shadow: none;
    border-color: var(--yellowColor) !important;
    outline: 0 none !important;
}
.form-control, .form-group {
    box-shadow: none;
    border-color: var(--grayColor) !important;
    outline: 0 none !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Spinner */
@keyframes spinner {
    to {transform: rotate(360deg);}
}
#spinner:before {
    content: '';
    box-sizing: border-box;
    position: fixed;
    top: 47%;
    right: 47%;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: .285rem solid var(--grayColor);
    border-top: .285rem solid var(--yellowColor);
    animation: spinner .8s linear infinite;
    z-index: 2;
}
#spinner{
    display: none;
}

/* Label Spacing & Style*/
.form-group .control-label, .form-group .custom-control-label{
    margin-bottom: 0.2rem;
    font-family: 'Trade Gothic LT Std';
    font-weight: normal;
    font-size: 1.25rem;
    color: var(--blackColor) !important;
}

.form-group .form-control,
#SavePaymentDisclaimer{
    border-radius: 6px !important;
    font-family: 'Trade Gothic LT Std';
    font-weight: normal;
    font-size: 1rem;
    color: var(--blackColor);
}

select>option {
    font-family: 'Trade Gothic LT Std';
    font-weight: normal;
    font-size: 1rem;
    color: var(--blackColor);
}

/* Button Position & Style */
#buttons{
    float: right;
}
#buttons button{
    border-radius: 6px !important;
    font-family: 'Trade Gothic LT Std';
    font-weight: bold;
    font-size: 1rem;
    outline: none !important ;
    border: none;
}
#buttons .btn-primary {
    background-color: var(--yellowColor);
    color: var(--blackColor);
}
#buttons .btn-secondary {
    background-color: var(--blackColor);
    color: var(--whiteColor);
}
#buttons .btn-secondary:hover {
    opacity: 60%;
}
#buttons .btn-primary:hover {
    background: rgba(238, 177, 17, 0.85);
}
#buttons .btn-secondary:focus,
#buttons .btn-primary:focus {
    box-shadow: none !important;
}

/* Error Inline Validation and Spacing */
.valerror {
    color: var(--redColor) !important;
    font-size: 0.8rem;
}
.input.error{
    border: 2px solid var(--redColor) !important;
}
.input.error.form-control:focus {
    border-color: var(--redColor);
}
.valerror::before{
    content: '\200b';
}
.form-group{
    margin-bottom: 0.5rem;
}
.input:not(.error){
    margin: 1px;
}

/* Error Modal */
.ui-dialog > .ui-widget-header {
    background:  var(--redColor) !important;
    color: var(--whiteColor) !important;
}
.ui-button {
    background:  var(--redColor) !important;
    color: var(--whiteColor)  !important;
}
.ui-dialog-titlebar-close {
    visibility: hidden;
}

/* Business Entity Variables */
:root{
    --yellowColor: #EEB111;
    --blackColor: #111111;
    --redColor: #ED1C24;
    --grayColor: #C3C3C3;
    --whiteColor: #FFFFFF;
    --backgroundColor: #EBEBEB;
    --priceBGColor: #FFFBF2;
}

/* Checkbox Styling */
.custom-checkbox .custom-control-input ~ .custom-control-label::before {
    border: 1px solid var(--grayColor) !important;
    background-color: var(--whiteColor);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--yellowColor)!important;
    border: none;
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    background-color: var(--yellowColor);
    filter: opacity(75%);
}
.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

#SavePaymentDisclaimer{
    margin-bottom: .725rem;
}

#CCNICKNAMEDiv{
    display: none;
}